<template>
	<div>
		<el-form :model="queryFormData" ref="projectForm" :inline="true" size="small">
			<el-form-item>
				<el-select v-model="queryFormData.proCode" placeholder="请选择所属项目" :clearable="!limitPro" filterable @change="loadAssetData">
					<el-option v-for="item in projectList" :key="item.id" :label="item.proName" :value="item.proCode"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryFormData.assetType" placeholder="请选择资产类型" clearable filterable @change="loadAssetData">
					<el-option v-for="item in assetType" :key="item.resourceTypeId" :label="item.name" :value="item.resourceTypeId"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input v-model="queryFormData.assetNum" placeholder="请输入资产型号" suffix-icon="el-icon-search" @input="assetNumChangeHandler"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="queryFormData.assetModel" placeholder="请输入资产编号" suffix-icon="el-icon-search" @input="assetModelChangeHandler"></el-input>
			</el-form-item>
		</el-form>
		<el-table ref="multipleTable" :data="dataSource" stripe class="systemTable" @selection-change="handleSelectionChange" height="400">
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="assetNum" label="资产编号" show-overflow-tooltip> </el-table-column>
			<el-table-column prop="assetTypeName" label="资产类型" show-overflow-tooltip> </el-table-column>
			<template v-if="showType == '0'">
				<el-table-column prop="assetModel" label="资产型号" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="assetSerialNum" label="资产序列号" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="proName" label="所属项目" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="manufacturerName" label="资产厂商" show-overflow-tooltip> </el-table-column>
			</template>

			<template v-if="showType == '2'">
				<el-table-column prop="hostName" label="主机名" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="beSystem" label="业务系统" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="hostIp" label="资产IP" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="hostPlace" label="资产位置" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="stateName" label="资产状态" show-overflow-tooltip> </el-table-column>
			</template>
		</el-table>
		<el-pagination
			class="systemPagination"
			:current-page.sync="pageParams.currentPage"
			:page-sizes="pageParams.pageSizes"
			:page-size="pageParams.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pageParams.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
		</el-pagination>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cancel" size="small">取 消</el-button>
			<el-button type="primary" @click="onsubmit" size="small">确 定</el-button>
		</div>
	</div>
</template>

<script>
	import singleTableMixin from '@/mixins/singleTableMixin'
	import assetApi from '@/api/assetApi'
	import { getAction, postAction } from '@/utils/httpUtil'
	import { throttle } from '@/utils/public'
	import { selectDictItems } from '@/system/api/dictionaryManage'
	export default {
		name: 'selectProject',
		mixins: [singleTableMixin],
		data() {
			return {
				defaultQueryParams: {
					state: 0,
				},
				apiUrl: {
					list: assetApi.asset.list,
				},
				assetType: [],
				autoLoadData: false,
				projectList: [],
			}
		},
		props: {
			showType: {
				type: String,
				default: '0',
			},
			assetState: {
				default: '',
			},
			limitPro: {
				type: Boolean,
				default: true,
			},
		},
		mounted() {
			// selectDictItems({ code: 'assetType' }).then(res => {
			// 	this.assetType = res.info
			// })
			// getAction(assetApi.asset.queryByCode, { name: '资产类型' }).then(res => {
			// 	this.assetType = res.info = res.info
			// })
			getAction(assetApi.asset.selectAssetType).then(res => {
				this.assetType = res.info = res.info
			})
			this.defaultQueryParams.state = this.assetState
			this.loadProject()
			if (this.limitPro) {
				this.$message.warning('请先选择所属项目')
			} else {
				this.loadData()
			}
		},
		methods: {
			loadProject() {
				getAction(assetApi.assetManage.selectProject).then(res => {
					this.projectList = res.info
				})
			},
			loadAssetData() {
				if (!this.limitPro) {
					this.loadData()
					return
				}
				if (this.queryFormData.proCode) {
					this.loadData()
				} else {
					this.$message.warning('请先选择所属项目')
				}
			},
			onsubmit() {
				this.$emit('onsubmit', this.multipleSelection)
			},
			cancel() {
				this.$emit('cancel', false)
			},
			assetTypeChangeHandler() {
				this.loadAssetData()
			},
			assetNumChangeHandler: throttle(function() {
				this.loadAssetData()
			}, 500),
			assetModelChangeHandler: throttle(function() {
				this.loadAssetData()
			}, 500),
			proNameChangeHandler: throttle(function() {
				this.loadAssetData()
			}, 500),
		},
	}
</script>

<style scoped>
	.dialog-footer {
		margin-top: 15px;
		text-align: right;
	}
</style>
